<script lang="ts">
export default {
    name: 'UserList'
}
</script>

<script setup lang="ts">
import useUserTable from '@/composables/system/user/useUserTable'
import AddAndEdit from './AddAndEdit.vue'
import useUser from '@/composables/system/user/useUser'
import AssignRole from './AssignRole.vue'
import SysPagination from '@/components/SysPagination/index.vue';
// 表格列表
const { tableData, getUserList, listParam, sizeChange, currentChange, searchBtn, resetBtn } = useUserTable()

// 表格的增删改
const { addBtn, editBtn, delBtn, assignBtn, addEditRef, save, assignRoleRef } = useUser(getUserList)

</script>
<template>
    <el-main>
        <!-- 搜索栏 -->
        <el-form :inline="true" :model="listParam" class="search">
            <el-form-item label="用户名称">
                <el-input v-model="listParam.username" placeholder="请输入用户名称"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="listParam.status" placeholder="状态">
                    <el-option label="正常" value="1" />
                    <el-option label="停用" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" v-permission="['system:user:query']" @click="searchBtn">搜索
                </el-button>
                <el-button type="default" icon="Refresh" @click="resetBtn">重置</el-button>
                <el-button type="success" v-permission="['system:user:add']" icon="Plus" @click="addBtn">新增</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table :data="tableData.list" border stripe>
            <el-table-column prop="id" label="ID" width="100" />
            <!-- <el-table-column prop="avatar" label="头像">
                <template #default="scope">
                    <el-image style="width: 70px; height: 70px" :src="scope.row.avatar" alt fit="fill"></el-image>
                </template>
            </el-table-column> -->
            <el-table-column prop="username" width="100" label="用户名称" />
            <el-table-column prop="nickname" label="用户昵称" />
            <el-table-column label="操作" width="200" align="center">
                <template #default="scope">
                    <el-button size="small" type="text" v-permission="['system:user:assign']" icon="Setting"
                        @click="assignBtn(scope.row.nickname, scope.row.id)">分配角色
                    </el-button>
                    <el-button size="small" type="text" v-permission="['system:user:edit']" icon="Edit"
                        @click="editBtn(scope.row)">编辑</el-button>
                    <el-button size="small" type="text" v-permission="['system:user:delete']" icon="Delete"
                        @click="delBtn(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <SysPagination :listParam="listParam" @sizeChange="sizeChange" @currentChange="currentChange"></SysPagination>
    </el-main>
    <!-- 新增、编辑弹框 -->
    <AddAndEdit ref="addEditRef" @save="save"></AddAndEdit>
    <!-- 分配角色 -->
    <AssignRole ref="assignRoleRef"></AssignRole>
</template>
<style lang="scss" scoped>
</style>